<template>
    <div :class="`special-tab-list ${mode}`">
        <Tabs class="list-tabs" v-model="active" @change="tabChange" :sticky="true">
            <template v-for="item in specialGroups">
                <Tab :title="item.name" :key="item.id">
                    <div class="tab-list-container">
                        <Row class="content" gutter="16" v-if="specialShelfData.length > 0">
                            <Col span="12" v-for="(item, index) in specialShelfData" :key="index">
                                <GoodsListItem :itemInfo="item" @addToBag="addToBag" :isBrand="isBrand" :mode="mode" :styleMode="styleMode" :theme="theme" />
                            </Col>
                        </Row>
                        <Empty v-else msg="暂无数据" :isTransparent="true" :mode="mode" :styleMode="styleMode" :theme="theme"  />
                    </div>
                </Tab>
            </template>
        </Tabs>
        <ChooseGoods
            v-if="goodsDetail"
            ref="choose"
            :info="goodsDetail"
            :isOnlySelect="false"
            :isChangeSku="false"
            :isAddBag="true"
            :isNowBuy="false"
            :mode="mode"
            :styleMode="styleMode"
            :theme="theme"
            @ensure="ensureChoose"
        />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Tab, Tabs, Row, Col } from 'vant';
import { Empty } from '@components/base';
import GoodsListItem from '../components/GoodsListItem';
import ChooseGoods from '../components/ChooseGoods';
import ModeMixin from '@common/mixin';
import { TipSuccess } from '@common/tip';
import logger from '@common/logger';
import EventBus from '@common/eventBus';

export default {
    name: 'SpecialTabList', // tab列表内容
    mixins: [ModeMixin],
    components: {
        Tab,
        Tabs,
        Row,
        Col,
        GoodsListItem,
        ChooseGoods,
        Empty,
    },
    props: {
        isBrand: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        ...mapState({
            specialShopInfo: state => state.shopSpecial.specialShopInfo,
            specialGroups: state => state.shopSpecial.specialGroups,
            specialShelfData: state => state.shopSpecial.specialShelfData,
        }),
    },
    data() {
        return {
            active: 0,
            goodsDetail: null,
        };
    },
    methods: {
        ...mapActions([
            'getSpecialShelfData',
            'getGoodsAllInfo',
            'addShopBagItem',
        ]),
        async tabChange(index, title) {
            const groupId = this.specialGroups[index].id;
            await this.getSpecialShelfData(groupId);
        },
        async addToBag(item) {
            logger.debugger('SpecialTabList => specialShopInfo', this.specialShopInfo);
            // 获取详情
            const detail = await this.getGoodsAllInfo({
                detail: item,
                warehouseId: this.specialShopInfo.isMainWarehouseInfo ? this.specialShopInfo.id : this.specialShopInfo.warehouse_id || 0,
            });
            logger.success('SpecialTabList => 获取的商品详情为：', detail);
            this.goodsDetail = detail;
            setTimeout(() => {
                this.$refs.choose.show();
            }, 50);
        },
        async ensureChoose(skuInfo) {
            logger.info('SpecialTabList => 选择的商品规格为', skuInfo);
            const item = {
                prod_id: this.goodsDetail.id,
                sku_id: skuInfo.id,
                quantity: skuInfo.quantity,
            };
            const flag = await this.addShopBagItem(item);
            if (flag) {
                TipSuccess('加入购物车成功');
                EventBus.$emit('RefreshBagData');
            }
        },
    },
};
</script>

<style lang="less">
.special-tab-list {
    background-color: @shop-bg-color;
    .tab-list-container {
        .p(@shop-gap-md);
        .p-b(60);
    }
    .content {
        .m-h(@shop-gap-md)
    }
    .list-tabs {
        width: 100%;
        .van-tabs__wrap {
            .linear-bottom(@white, @shop-bg-color);
            .van-tab {
                .linear-bottom(@white, @shop-bg-color);
            }
        }
        .van-tabs__wrap--scrollable .van-tab {
            flex: 0 0 20%;
        }
        .van-tabs__line {
            border-radius: 2px;
            height: 4px;
        }
        .van-tab__pane {
            .p-b(@shop-gap-md);
        }
    }
    &.black {
        background-color: #000;
        .list-tabs {
            .van-tabs__wrap {
                .linear-bottom(@black-bg-color, #000);
                .van-tab {
                    .linear-bottom(@black-bg-color, #000);
                    color: @tip-color;
                    &.van-tab--active {
                        color: @black-title-color;
                    }
                }
            }
        }
    }
}
</style>
